<template>
  <div style="font-size: 12px">
    <h2>权限管理</h2>
    <el-tree
      :data="treedate"
      show-checkbox
      node-key="id"
      :props="defaultProps"
      ref="tree"
      default-expand-all
      :expand-on-click-node="false">
      <div slot-scope="{ node, data }" style="display: flex;justify-content: flex-start">

        <template v-if="data.type == '0'">
          <div style="width:120px">{{data.name}}</div>
          <div style="width: 80px">
            <el-tag type="success" size="mini"> 目录</el-tag>

          </div>
        </template>
        <template v-else-if="data.type == '1'">
          <div style="width:100px">{{data.name}}</div>
          <div style="width: 80px">
            <el-tag type="warning" size="mini">菜单</el-tag>
          </div>
        </template>
        <template v-else>
          <div style="width:80px">{{data.name}}</div>
          <div style="width: 80px">
            <el-tag type="danger" size="mini">按钮</el-tag>
          </div>
        </template>

        <div style="width: 80px">
          <i :class="['iconfont',data.icon]"></i>
        </div>

        <div style="width: 100px">
          {{data.parentname}}
        </div>
        <div style="width: 100px">
          {{data.url}}
        </div>
        <div style="width: 100px">
          {{data.perms}}
        </div>
        <div style="margin-left: 70px">
          <el-button size="mini" type="warning" @click="edit(data,node)">编辑</el-button>
        </div>
        <div style="margin-left: 70px">
          <el-button size="mini" type="danger">删除</el-button>
        </div>
      </div>
    </el-tree>

    <el-dialog :title="title" :visible.sync="formVisiable" :close-on-click-modal="false" width="500px">
      <el-form :model="editmenu" size="small">
        <div>
          <el-radio v-model="editmenu.type" @change="changetab('Folder')" :label="0">目录</el-radio>
          <el-radio v-model="editmenu.type" @change="changetab('MenuDetail')" :label="1">菜单</el-radio>
          <el-radio v-model="editmenu.type" @change="changetab('Button')" :label="2">按钮</el-radio>
        </div>
        <div>
          <router-view>

          </router-view>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="formVisiable = false" size="small">取 消</el-button>
        <el-button type="primary" @click="save" size="small">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import axios from 'axios'
  import qs from 'qs'
  import ElButton from "../../../node_modules/element-ui/packages/button/src/button.vue";
  import {deepCopy} from "../../js/common.js"

  export default {
    components: {ElButton},
    name: "UserManager",
    data() {
      return {
        title: "",
        form: {},
        formVisiable: false,
        editmenu: {},
        parentmenus: [],
        parentids: [],
        treedate: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        }
      }
    }, methods: {
      getTreeData() {
        var that = this
        axios.get("/sys/role/treeData", {
          params: {
            pid: '0'
          }
        }).then(function (response) {
          that.treedate = response.data
          that.parentmenus = that.getParentMenus(that.treedate);
          that.editmenu = that.parentmenus[0];
        })
      }, getParentMenus(currobj) {
        if (typeof currobj !== 'object') {
          return currobj;
        }
        if (currobj instanceof Array) {
          var newobj = [];
        } else {
          var newobj = {}
        }
        for (var key in currobj) {
          if (key == "children" && currobj['type'] == 1) {

          } else {
            if (typeof currobj[key] !== 'object') {
              newobj[key] = currobj[key];
            } else {
              newobj[key] = this.getParentMenus(currobj[key])
            }
          }
        }
        return newobj
      }, edit(data, node) {
      this.formVisiable = true;
      this.editmenu = deepCopy(data)
      this.parentids.splice(0, this.parentids.length); //清空
      this.findParentIds(node);
      this.parentids.reverse();
      var routername = '';
      if (data.type == '0')
        routername = "Folder";
      else if (data.type == "1")
        routername = "MenuDetail"
      else
        routername = "Button"
      this.changetab(routername)

    },

    //找到父节点
    findParentIds(node) {
      if (node.parent && !(node.parent.data instanceof Array)) {
        var id = node.parent.data.id;
        this.parentids.push(id);
        this.findParentIds(node.parent);
      }
    }, save() {

    },
    changetab(routername) {

      this.$router.push(
        {
          name: routername,
          params: {
            menu: this.editmenu,
            menus: this.parentmenus,
            parentids: this.parentids
          }
        }
      );
    }
  }
  ,
  mounted()
  {
    this.getTreeData()
  }
  }
</script>

<style>
  .el-tree-node__content {
    height: 50px;
  }
</style>
